<template>
    <div id="setList">
        <el-table :data="list" style="width: 100%" border>
            <el-table-column
                prop="wh_name"
                label="仓库名称"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                prop="adminStr"
                label="仓库管理员"
                align="center"
                width="183">
            </el-table-column>
            <el-table-column
                align="center"
                label="使用资产版块的部门">
                <template slot-scope="props">
                    <ul class="menuList">
                        <li v-for="(item,index) in props.row.a_dept" :key="index">【{{item.dept_name}}】</li>
                    </ul>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="使用耗材版块的部门">
                <template slot-scope="props">
                    <ul class="menuList">
                        <li v-for="(item,index) in props.row.c_dept" :key="index">【{{item.dept_name}}】</li>
                    </ul>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="操作"
                width="137"
                >
                <template slot-scope="props">
                    <div class="btns">
                        <el-button type="text" @click="retrunBtn(props.row.id,'update',props.$index)">编辑</el-button>
                        <el-button type="text" @click="retrunBtn(props.row.id,'del',props.$index)" v-if="props.row.wh_is_default != 1">删除</el-button>
                        <span v-else class="empty"></span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        props:{
           list:{
               type:Array,
               default:()=>{return []}
           }
        },
        data(){
            return {}
        },
        methods:{
            retrunBtn(id,type,index){
               this.$emit('clickFn',{id,type,index})
            }
        }
    }
</script>

<style lang="scss">
#setList{
    margin-top: 10px;
    .el-table th{
        background-color: rgba(249, 249, 249, 1) !important;
        color: rgba(16, 16, 16, 1) !important;
        height: 50px !important;
        font-weight: 400 !important
    }
    .el-table td{
        height: 118px !important;
        overflow: hidden;
        color: rgba(16, 16, 16, 1) !important;
    }
    .el-table td .cell{
        font-size: 12px !important;
    }
    .menuList{
        width: calc(100% - 10px);
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        // justify-content: center;
        align-items: center;
        padding-left: 10px;
        li{
            color: rgba(96, 98, 102, 1);
            font-size: 12px;
            text-align: center;
            margin:3px 4px 3px 0;
            &:last-child{
               margin-right: 0
            }
        }
    }
    .el-button{
        span{
            font-size: 14px
        }
    }
    .empty{
        padding: 0 19px !important;
        height: 1px;
    }
}
</style>